<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Calendar</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.1/tailwind.min.css">
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const calendar = document.getElementById("calendar");
            const monthYearLabel = document.getElementById("monthYear");
            let currentDate = new Date();

            // 渲染日历
            function renderCalendar(date) {
                const year = date.getFullYear();
                const month = date.getMonth();
                monthYearLabel.textContent = `${year}年 ${month + 1}月`;

                const firstDay = new Date(year, month, 1).getDay();
                const daysInMonth = new Date(year, month + 1, 0).getDate();

                calendar.innerHTML = "";

                for (let i = 0; i < firstDay; i++) {
                    calendar.innerHTML += `<div class="p-2 border"></div>`;
                }

                for (let day = 1; day <= daysInMonth; day++) {
                    calendar.innerHTML += `<div class="p-2 border text-center cursor-pointer" onclick="goToDate(${year}, ${month + 1}, ${day})">${day}</div>`;
                }
            }

            // 切换月份
            function changeMonth(offset) {
                currentDate.setMonth(currentDate.getMonth() + offset);
                renderCalendar(currentDate);
            }

            // 跳转到日期详情页面
            window.goToDate = function (year, month, day) {
                window.location.href = `/event/${year}/${month}/${day}`;
            }

            // 初始化渲染
            renderCalendar(currentDate);

            // 绑定事件
            document.getElementById("prevMonth").addEventListener("click", () => changeMonth(-1));
            document.getElementById("nextMonth").addEventListener("click", () => changeMonth(1));
        });
    </script>
</head>
<body class="flex items-center justify-center h-screen bg-gray-100">
    <div class="bg-white shadow-lg rounded-lg p-6 w-96">
        <div class="flex justify-between items-center mb-4">
            <button id="prevMonth" class="px-2 py-1 bg-blue-500 text-white rounded">上个月</button>
            <div id="monthYear" class="text-xl font-bold"></div>
            <button id="nextMonth" class="px-2 py-1 bg-blue-500 text-white rounded">下个月</button>
        </div>
        <div id="calendar" class="grid grid-cols-7 gap-1"></div>
    </div>
</body>
</html>